
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>动态时钟</title>
		<style>
			 #msg{
				 border: 1px solid #ccc;
				 width: 100px;
				 height: 40px;
				 line-height: 40px;
				 text-align: center;
			 }
			 .show{
				 display: block;
			 }
			 .hide{
				 display: none;
			 }
		</style>
		<script>
			  function del(){
				  var input = document.getElementById("t1");
				  input.value = "";
				  //显示提示信息
				  var p = document.getElementById("msg");
				  p.className = "show";
				  //延迟两秒
				  var id = setTimeout(function(){
					  p.className = "hide"
					  clearTimeout(id);
				  },2000)
				  
			  }
		</script>
	</head>
	<body>
		 <h1>删除提示延时</h1>
		 <!-- 点击删除，xxx消失，提示 操作成功2秒后 操作成功消失-->
		 <p>
			<input type="text" value="xxx" id='t1'/> 
			 <input type="button" value="删除" onclick="del()"/>
			 
		 </p>
		 <p id="msg" class="hide">操作成功</p>
		 
	</body>
</html>